<template>
  <div >
    <!-- test
    <a-button type="primary" @click="handleClick">primary btn</a-button>
    <a-tabs type="card" :animated="false" >
      <a-tab-pane key="1" tab="Tab 1">
        Content of Tab Pane 1
      </a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2">
        Content of Tab Pane 2
      </a-tab-pane>
      <a-tab-pane key="3" tab="Tab 3">
        Content of Tab Pane 3
      </a-tab-pane>
    </a-tabs>
    <a-tree :treeData="treeData" :replaceFields="replaceFields">
      <span slot-scope="scope">
        {{scope.dataRef && scope.dataRef.label}}
      </span>
    </a-tree>
    <a-button @click="handleContext">test context menu</a-button>
    
 -->

    <span class="g-operation" @click="testSelectList"> test select list</span>
    <a-button @click="handleTestSaveLoading">saveLoading</a-button>
    <a-button @click="testConfirm">testConfirm</a-button>
    <a-button @click="testChooseElement">testChooseElement</a-button>
    <div @click="handleClickLarge">{{large}}</div>
    {{log('render')}}
    <m-render :render="renderMsg"/>
    <component :is="{render:renderMsg}"></component>
    <a-button @click="chooseFile">chooseFile</a-button>
    <img :src="imgStr"/>
    
    <!-- <div>
      <div
        v-for="(i,index) in imgs"
        :key="index"
        class="g-inline-block"
      >
        <div>
          <img
     
            :src="i"
            :title="i"
            style="max-width:100px"/>

        </div>

      </div>
    </div> -->
    
  </div>
</template>
<script>
import { selectValue } from 'src/components/Attribute/modals/SelectValue';
import { ContextMenu } from 'src/components/common/ContextMenu/index';
import Menu from 'src/components/common/ContextMenu/Menu';

import { listSelect } from 'components/Attribute/modals/ListSelect';
import { saveLoading } from 'components/Project/modals/SaveLoading';
import { chooseElement } from 'src/components/common/ChooseElement';
import Render from  'components/common/render';
import { chooseFile, uint8ArrayToString } from '@/util/common';
import Base64, { toByteArray } from 'base64-js';
import xmlParser from 'fast-xml-parser';
import XLSX from 'xlsx';
import localFile from '@/util/localFile';
import { LocalFileService } from '@/util/localFile/LocalFileService';
import modelPropertyConfig from '@/api/config/modelPropertyConfig.json';

export default {
  name: 'comp-',
  components: {
    'm-menu': Menu,
    'm-render': Render
  },
  props: {},
  data() {
    return {
      treeData: [
        {
          label: 'AAA',
          value: 1,
          icon: 'statics/images/mainpage/iconcopy.svg',
          scopedSlots: { title: 'default' },
          children: [
            {
              label: 'AAA2',
              value: 2,
              icon: '111',
              scopedSlots: { title: 'default' },
            },
            {
              label: 'AAA3',
              value: 3,
              icon: '111',
              scopedSlots: { title: 'default' },
            }
            
          ],
        },
        {
          label: 'AAA4',
          value: 4,
          icon: '111',
          scopedSlots: { title: 'default' },
        }
      ],
      replaceFields: { title: 'label', key: 'value', children: 'children' },
      imgs: [],
      clickTime: 0,
      imgStr: ''
    };
  },
  computed: {
    selectedNode() {
      return this.$store.state.mbse.selectedTreeNode;
    },
    large(){
      return this.clickTime > 5;
    }
    
  },
  mounted() {
    //// this.imgs = this.getImgs(__dirname + '/../statics');
    LocalFileService.readFile('C:/Users/Administrator/Downloads/UML泛化关系(1).xlsx').then(res => {
      const workbook = XLSX.read(res, {
        type: 'buffer',
        cellHTML: false,
      });
      const sheetNames = workbook.SheetNames;
      //// 根据表名获取对应某张表
      const worksheet = workbook.Sheets[sheetNames[0]];
      const sheetjson = XLSX.utils.sheet_to_json(worksheet);
      console.log(sheetjson);
      const result = sheetjson.map(it => {
        let selfAttributes =  it.attribute && it.attribute.split('\n');
        let arr = [];
        if (selfAttributes){

          selfAttributes.forEach(str => {
            if (str.includes('_')) return;
            let key = str.split(':')[0].trim().replace(/[+/_]+/g, '');
            '0'.substring(1);
            key = key[0].toUpperCase() + key.substring(1);
           
            arr.push(key);
          });
        }
        return {
          name: it.name,
          selfAttributes: arr
          //// allAttributes: it.allAttributes && it.allAttributes.split('\n')
           
        };
      });
      console.log(result);

      const newConfig = {};
      const allProps = [];
      Object.values(modelPropertyConfig).forEach(i => {
        allProps.push(...i.properties);
      });
      result.forEach(it => {

        newConfig[it.name] = { className: it.name, properties: [] };
        //// if (it.name === 'Package') debugger;
        newConfig[it.name].properties = it.selfAttributes.map(propName => {
          
          console.log(it.name, modelPropertyConfig[it.name], propName, modelPropertyConfig[it.name] && modelPropertyConfig[it.name].properties.find(i => i.enName === propName));
          let property = (modelPropertyConfig[it.name] && modelPropertyConfig[it.name].properties.find(i => i.key === propName));
          if (!property){
            property = allProps.find(i => i.key === propName) || { key: propName, unknowProp: true };

          }

          return property;
        })
        ;
      });
      console.log(newConfig);
      //// window.$ele.fs.writeFile('C:/Users/Administrator/Downloads/propWidthUnknow.json', JSON.stringify(newConfig), (e) => console.error(e));
      //// Object.values(newConfig).forEach(val => {
      ////   val.properties =  val.properties.filter(i => !i.unknowProp);
      //// });
      //// window.$ele.fs.writeFile('C:/Users/Administrator/Downloads/prop.json', JSON.stringify(newConfig), (e) => console.error(e));
      
    });

  },
  methods: {
    handleClick() {
      selectValue.popup({
        selectedElement: proxy.projects.get(proxy.activeProjectId).ui
          .selectElement,
      });
    },
    handleContext(event) {
      console.log({ x: event.clientX, y: event.clientY });
      ContextMenu.popup({
        x: event.clientX,
        y: event.clientY,
        menuItems: menuConfig,
      }).then((res) => {
        console.log(res);
      });
    },
    testSelectList() {
      listSelect
        .popup({
          title: '新建图表',
          list: [
            {
              label: 'AAA',
              value: '1',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '2',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '3',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AAA',
              value: '4',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '5',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '6',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AAA',
              value: '7',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '8',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '9',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AAA',
              value: '10',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '11',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '12',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AAA',
              value: '1x',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '2x',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '3x',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AAA',
              value: '4x',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '5x',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '6x',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AAA',
              value: '7x',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '8x',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '9x',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AAA',
              value: '10x',
              icon: 'statics/images/sysml/Model.svg',
            },
            {
              label: 'AB',
              value: '11x',
              icon: 'statics/images/sysml/Model.svg',
              disabled: true,
            },
            {
              label: 'ABC',
              value: '12x',
              icon: 'statics/images/sysml/Model.svg',
            }
          ],
          multiple: true,
          top: window.event.clientY,
          left: window.event.clientX,
        })
        .then((res) => {
          console.log('success', res);
        })
        .catch((e) => {
          e && console.error(e);
        });
    },
    handleTestSaveLoading() {
      saveLoading.popup({ time: 200000 });
    },
    testChooseElement() {
      chooseElement.popup({
        x: window.event.clientX,
        y: window.event.clientY,
        title: '选择',
        list: [
          {
            label: '图1',
            children: [
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              },
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              },
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              },
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              },
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              },
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              }
            ],
          },
          {
            label: '图2',
            children: [
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              },
              {
                value: 'aaa',
                icon: 'statics/images/sysml/Model.svg',
                label: 'ABCDFG',
              }
            ],
          }
        ],
      });
    },

    testConfirm() {
      console.log(this.$Confirm, this.$Confirm.popup);
      this.$Confirm
        .popup({
          content: '该项目已经被打开,将自动切换到该项目...',
          cancelText: '',
          renderContent: h => <div>999</div>
        })
        .then(() => {
          console.log('success');
        });
    },
    getImgs(path, imgs = []) {
      if (this.$globalConfig.isElectron) {
        const fs = window.$ele.fs;

        const res = fs.readdirSync(path, { withFileTypes: true });
        res.forEach((dir) => {
          if (dir.isDirectory()) {
            this.getImgs(path + '/' + dir.name, imgs);
          } else {
            if (
              dir.name.endsWith('.png') ||
							dir.name.endsWith('.svg') ||
							dir.name.endsWith('.ico')
            )
              imgs.push(
                (path + '/' + dir.name)
                  .replace('src/pages/../', '')
                  .replace('src\\pages/../', '')
              );
          }
        });
        //// console.log(res);
      }
      return imgs;
    },
    handleClickLarge(){
      this.clickTime++;
    },
    log(str){
      console.log(str);
    },
    renderMsg(h){
      return <div>666</div>;
    },
    chooseFile(){
      chooseFile().then((res) => {
        console.log(res);
        let base64String = btoa(String.fromCharCode(...new Uint8Array(res.data)));
        const index = res.name.lastIndexOf('.');
        let suffix = res.name.substring(index + 1);
        console.log(suffix);
        if (suffix === 'svg'){
          suffix += '+xml';
        }
        base64String =  "data:image/" + suffix + ";base64," + base64String;

        //// uint8ArrayToString();
      
        //// window.btoa();
        //// const str = Base64.fromByteArray( new Uint8Array( res.data ));
        console.log(base64String);
        this.imgStr = base64String;
      }
      );
      
    }

  },
  //// render(h){
  ////   return <div>111</div>;

  //// }
};
</script>
<style lang="scss">
</style>
